<template>
	<div>
		<el-main>
			<div class="block text-center" m="t-4">
				<el-carousel
					trigger="click"
					height="700px"
					motion-blur:autoplay="true"
				>
					<el-carousel-item v-for="pic in pics" :key="pic.photoId">
						<div class="carousel-item">
							<img :src="pic.photoLink" class="carousel-img" />
							<p class="carousel-text">
								{{ pic.photoDescribe }}
							</p>
						</div>
					</el-carousel-item>
				</el-carousel>
			</div>
		</el-main>
		<div class="author-page-button">
			<botton @click="toAuthor(this.Info.authorId)" class="custom-button"
				>@作者{{ this.Info.authorName }}</botton
			>
		</div>
		<div class="right-button">
			<button class="trans-button" @click="addLike">
				<img src="../assets/imgs/Star.png" alt="点赞" style="width: 32px; height: 32px;">
			</button>
			<span class="custom-font">{{ likeCount }}</span>
			<button class="trans-button" @click="fetchComments">
				<img src="../assets/imgs/Comment.png" alt="评论区" style="width: 32px; height: 32px;">
			</button>
			
		</div>

		<el-drawer
			v-model="drawer"
			title="评论区"
			direction="btt"
			size="85%"
		>
		<el-input
			v-model="commentText"
			style="width: 90%"
			:autosize="{ minRows: 2, maxRows: 4 }"
			type="textarea"
			placeholder="在此输入评论内容~"
		/>
			<el-button @click="publishComment">发布评论</el-button>
			<el-table :data="gridData">
				<el-table-column property="createTime" label="发布时间" width="150" />
				<el-table-column property="authorName" label="用户名" width="200" />
				<el-table-column property="commentText" label="评论内容" />
			</el-table>
		</el-drawer>
	</div>
</template>

<script lang="ts">
import axios from "axios";
import router from "../router";
import type { DrawerProps } from "element-plus";
import { ElMessageBox } from "element-plus";
import { ref } from "vue";

export default {
	name: "Publics",
	data() {
		return {
			pics: [],
			Info: [],
			drawer:ref(false),
			gridData:[
				{
					createTime: '',
					authorName: '',
					commentText: '还没有人发布评论哦',
				}
			],
			commentText:ref(''),
			likeCount:ref(0),
		};
	},
	created() {
		this.fetchInfo();
	},
	methods: {
		async fetchInfo() {
			const queryString = window.location.search;
			const params = new URLSearchParams(queryString);
			const hid = params.get("hid");
			try {
				const response = await axios.get(
					"http://121.41.171.56:2003/work/getSingleWork/" + hid
				);
				this.Info = response.data.data;
				this.pics = this.Info.pictureList;
				this.likeCount=response.data.data.likeCount;
			} catch (error) {
				console.error("Error fetching info:", error);
			}
		},
		toAuthor(authorId) {
			router.push({ name: "PersonalSpace", query: { authorId } });
		},

		async fetchComments() {
			this.drawer = true;
			const queryString = window.location.search;
			const params = new URLSearchParams(queryString);
			const hid = params.get("hid");
			try {
				const response = await axios.get(
					"http://121.41.171.56:2003/work/getCommentByWorkId/" + hid
				);
				this.gridData = response.data.data;
			} catch (error) {
				console.error("Error fetching info:", error);
			}
		},

		async publishComment() {

			const config = {  
				headers: {  
					'Content-Type': 'application/json',
					'token':''
				}  
			}; 

			const queryString = window.location.search;
			const params = new URLSearchParams(queryString);
			const hid = params.get("hid");
			try {

				const dataToSend = {  
					"commentText":this.commentText,
    				"workId":hid
				}; 

				const jsonData = JSON.stringify(dataToSend); 

				//config.headers.token=useUserInfoStore.token()
				const tempToken = localStorage.getItem("vue_admin_template_token")
				if(tempToken!=null) {
					config.headers.token = tempToken
				}

				const response = await axios.post(
					"http://121.41.171.56:2003/work/uploadComment" , jsonData,config
				)

				this.gridData.push({  
					createTime: new Date().toISOString(), 
					authorName: '', 
					commentText:this.commentText 
				});  
			
				// 清除commentText输入框的值（如果需要）  
				this.commentText.value = ''; 

			} catch (error) {
				console.error("Error fetching info:", error);
			}
		},
		async addLike() {
			const queryString = window.location.search;
			const params = new URLSearchParams(queryString);
			const hid = params.get("hid");
			try {
				await axios.post("http://121.41.171.56:2003/work/addLike/"+hid);
				this.likeCount++;
			} catch (error) {
				console.error("Error fetching info:", error);
			}
		}
	},
};
</script>

<style scoped>
.demonstration {
	color: var(--el-text-color-secondary);
}

.el-carousel__item:nth-child(2n) {
	background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
	background-color: #d3dce6;
}

.carousel-item {
	position: relative;
	width: 100%;
	height: 100%;
}

.carousel-img {
	width: 100%;
	height: 100%;
}

.carousel-text {
	position: absolute;
	font: 36px;
	color: rgba(255, 255, 255, 0.6);
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	padding: 5px 10px;
}

.author-page-button {
	position: fixed;
	left: 30px; /* 调整按钮距离左边框的距离 */
	bottom: 30px; /* 调整按钮距离底边框的距离 */
}

.right-button {
	position: fixed;
	right: 30px; /* 调整按钮距离左边框的距离 */
	bottom: 30px; /* 调整按钮距离底边框的距离 */
}

.custom-button {
	width: 232px;
	height: 58px;
	color: #ffffffc5;
	font-size: 24px;
	font-weight: slim;
	border: none;
	cursor: pointer;
	outline: none;
}

.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

.trans-button {  
    /* 保留或定义您的按钮样式，例如背景色、边框、内边距等 */  
    background-color: #00000000; /* 示例背景色 */  
    border: none; /* 无边框 */  
    padding: 10px; /* 内边距 */  
    cursor: pointer; /* 鼠标悬停时变为手型 */  
    /* 其他您需要的样式 */  
}  

.custom-font {
	font-size: 28px;
	color: #ffffff70;
	padding-left: 10px;
	padding-right: 30px;
}
</style>
